<template>
  <van-skeleton title :row="6" :loading="pageLoading">
    <div class="login">
      <van-nav-bar
        title="登录"
        fixed
        safe-area-inset-top
      />
      <div class="login-icon">
        <van-image
          width="200"
          height="200"
          round
          fit="contain"
          :src="appInfo.appIcon"
        />
      </div>

      <div class="login-app-name">
        <div style="
        background-color: #fff;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
      ">
          <span class="login-name-text">{{appInfo.appName}}</span>
        </div>
      </div>

      <div class="login-form">
        <van-form @submit="onSubmit">
          <van-field
            v-model="username"
            name="username"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            :right-icon="pwdIcon"
            :type="pwdType"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
            @click-right-icon="showPwd"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">登录</van-button>
          </div>
        </van-form>
      </div>
      <div v-if="false" class="login-other">
        <span class="login-other-text">其它登录方式</span>
        <div class="login-other-but">
          <van-icon name="link-o" size="30" color="#f0a70a" />
          <van-icon name="link-o" size="30" color="#07c160" />
          <van-icon name="link-o" size="30" color="#00a1d6" />
        </div>
      </div>
    </div>
  </van-skeleton>
</template>

<script>
import { setToken } from '@/utils/auth'
import { mobileData } from '@/views/youshuda/base/mobile/util/mobileData'

export default {
  name: 'mobileLogin',
  data() {
    return {
      username:'',
      password:'',
      pwdType: 'password',
      pwdIcon: 'eye-o',
      appKey: null,
      homePageKey: null,
      appInfo: {},
      mobileData:mobileData,
      pageLoading: true
    }
  },
  watch: {
    "mobileData.appKey":{
      immediate: true,
      deep: true,
      handler(val) {
        if(!val){
          return;
        }
        this.appKey = val;
        this.loadAppData();
      },
    }
  },
  created: function() {
    // let redirect = this.getUrlParams()['redirect'];
    // let _appKey = this.getUrlParams(redirect)['appKey'];
    // if(!_appKey){
    //   this.$message.error('请传入appKey参数');
    //   return;
    // }
    // this.appKey = localStorage.getItem("appKey");
    // this.loadAppData();
  },
  methods: {
    //加载app数据
    loadAppData(){
      this.request({
        url: '/generator/AppBuildInfo/getAppInfoByAppKey?appKey='+this.appKey,
        method: 'get'
      }).then(res => {
        if(res.code == 200){
          let _appInfo = res.data.appInfo;
          _appInfo['appIcon'] = process.env.VUE_APP_BASE_API +_appInfo.appIcon;
          this.appInfo = _appInfo;
          this.homePageKey = res.data['homePageKey'];
          this.pageLoading = false;
        }else{
          this.$message.error(res.msg);
        }
      }).catch(err => {
        this.$message.error(err.msg);
      })
    },
    onSubmit(values){
      this.request({
        url: '/mobileLogin',
        method: 'post',
        data: {
          username: values.username,
          password: values.password
        },
        headers: {
          isToken: false,
          repeatSubmit: false
        },
      }).then(res => {
        setToken(res.token);
        this.$router.push("/ysdAppRender/mobilePageRender/"+this.homePageKey);
      })
    },
    showPwd(){
      this.pwdType = (this.pwdType === 'password' ? 'text' : 'password')
      this.pwdIcon = (this.pwdType === 'password' ? 'closed-eye' : 'eye-o')
    }
  },
}
</script>

<style scoped>
  /deep/.van-nav-bar__title{
    font-weight: bold;
  }
  .login{
    background-color: #f7f8fa;
    height: 100%;
    width: 100%;
  }
  .login-icon{
    width: 100%;
    height: 250px;
    padding-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .login-app-name{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1px 10px 10px 10px;
    margin-top: 5px;
    height: 70px;
    width: 100%;
  }
  .login-name-text{
    font-size: 20px;
    font-weight: bold;
    color: #8e8d8d;
  }
  .login-form{
    width: 100%;
    padding: 10px 10px 0px 10px;
  }
  .login-other{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
  }
  .login-other-text{
    color: #abacac;
  }
  .login-other-but{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 20px;
  }

</style>
